
<template>
  <div class="detrail_skeleton" >
    <el-skeleton-item variant="h3" class="h3" />
    <el-skeleton-item variant="h3" class="h3 last" />
    <div class="title_skeleton">
      <el-skeleton-item variant="h1" />
    </div>
    <div class="info_skeleton">
      <div v-for="item in 7" :key="item" class="info_skeleton_item">
        <el-skeleton-item variant="p" />
        <el-skeleton-item variant="p" />
      </div>
    </div>
    <div class="title_skeleton table_title">
      <el-skeleton-item variant="h1" />
    </div>
    <div class="table_skeleton">
      <el-skeleton-item v-for="item in 7" :key="item" variant="text" />
      <el-skeleton-item variant="h1" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.detrail_skeleton {
  padding: 14px;
  .h3 {
    width: 50%;
    height: 32px;
    margin-right: 16px;
    &.last {
      width: 10%;
    }
  }
  .title_skeleton {
    margin-top: 16px;
    width: 36%;
    .el-skeleton__item  {
      height: 24px;
    }
  }
  .info_skeleton {
    display: grid;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 28px;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    .info_skeleton_item {
      flex: 1;
      gap: 16px;
      .el-skeleton__item {
        display: inline-block;
        height: 20px;
      }
      .el-skeleton__item:first-child {
        width: 30%;
      }
      .el-skeleton__item:last-child {
        margin-left: 16px;
        width: 60%;
      }
    }
  }
  .table_title {
    margin-top: 46px;
  }
  .table_skeleton {
    margin-top: 16px;
    .el-skeleton__item {
      margin-top: 20px;
      height: 16px;
    }
    .el-skeleton__h1 {
      margin-top: 28px;
      width: 34%;
      height: 24px;
      float: right;
    }

  }
}
</style>